<template>
  <div>
    <router-view></router-view>
    <van-tabbar v-model="active" active-color="#1989fa" @change="onChange">
      <van-tabbar-item name="/home/singUp">
        <span>报名</span>
        <template #icon="props">
          <i v-show="!props.active" class="iconfont icon-baoming"></i>
          <i v-show="props.active" class="iconfont icon-baoming iconColor"></i>
        </template>
      </van-tabbar-item>
      <van-tabbar-item name="/home/liveIndex">
        <span>社区</span>
        <template #icon="props" >
          <i v-show="!props.active" class="iconfont icon-shequ"></i>
          <i v-show="props.active" class="iconfont icon-shequ iconColor"></i>
        </template>
      </van-tabbar-item>
      <van-tabbar-item name="/home/test">
        <span>考试</span>
        <template #icon="props" >
          <i v-show="!props.active" class="iconfont icon-baoming"></i>
          <i v-show="props.active" class="iconfont icon-baoming iconColor"></i>
        </template>
      </van-tabbar-item>
      <van-tabbar-item name="/home/me">
        <span>我的</span>
        <template #icon="props" >
          <i v-show="!props.active" class="iconfont icon-wode"></i>
          <i v-show="props.active" class="iconfont icon-wode iconColor"></i>
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup>
import { ref} from 'vue';
import { useRouter } from 'vue-router';
const router=useRouter()  //获取路由管理器对象
//底部标签栏
const active=ref('/home/singUp')
const onChange=function(index){
  //console.log(index);
  router.push(index)
}




</script>

<style lang="scss" scoped>
.iconColor{
  color: #0a58ca;
  

  
}
</style>
